<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="headerBag">
			<image src="../../static/icons/icon-Get-into@3.png" class="back" @click="goBack"></image>
			<view class="heade_c">
				<text>图文详情</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<view id="box" v-if="goodsData">
			<view class="shangjia">
				<view class="title">{{ goodsData.title }}</view>
				<view class="jianjie">{{ goodsData.intro }}</view>
				<view class="img-list">
					<view class="img-item" v-for="(img, index) in imageList" :key="index">
						<image :src="img" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<!-- 底部购买栏 -->
			<view class="buy-box">
				<view class="fl">
					<view class="price-sj">
						¥ <text class="price-num">{{ goodsData.price }}</text> 
						<text class="market-price">¥ {{ goodsData.market_price }}</text>
					</view>
					<view class="price-old">
						到手价<text> ¥ {{ goodsData.hand_price }}</text>
					</view>
				</view>
				<view class="fr">
					<view class="buy-lj" @click="buyNow">立即购买</view>
				</view>
			</view>
		</view>

		<!-- 加载中 -->
		<view v-else class="loading">
			<text>加载中...</text>
		</view>
	</view>
</template>

<script>
	import { o2oApi } from '@/api/index.js'

	export default {
		data() {
			return {
				groupId: '',
				storeId: '',
				goodsData: null,
				imageList: []
			}
		},
		onLoad(options) {
			this.groupId = options.group_id || ''
			this.storeId = options.store_id || ''
			
			if (this.groupId && this.storeId) {
				this.getImageTextDetail()
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				})
			}
		},
		methods: {
			// 获取图文详情
			async getImageTextDetail() {
				try {
					const res = await o2oApi.getImageTextDetail({
						group_id: this.groupId,
						merch_id: this.storeId
					})
					
					if (res.r === 0) {
						this.goodsData = res.data.goods
						this.imageList = res.data.image_list || []
					} else {
						uni.showToast({
							title: res.msg || '获取详情失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('获取图文详情失败:', error)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				}
			},

			// 立即购买
			buyNow() {
				uni.navigateTo({
					url: `./submit-order?group_id=${this.groupId}&store_id=${this.storeId}`
				})
			},

			// 返回上一页
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.headerBag {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background: #ff1e00;
		display: flex;
		align-items: center;
		z-index: 999;
		padding: 0 30rpx;
	}

	.back {
		width: 40rpx;
		height: 40rpx;
	}

	.heade_c {
		flex: 1;
		text-align: center;
		margin-right: 40rpx;
	}

	.heade_c text {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}

	#box {
		margin-top: 88rpx;
		padding-bottom: 150rpx;
	}

	.shangjia {
		padding: 0 30rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.shangjia .title {
		font-size: 34rpx;
		color: #212121;
		margin-bottom: 10rpx;
		font-weight: 700;
		padding-top: 30rpx;
	}

	.shangjia .jianjie {
		font-size: 28rpx;
		color: #6e6e6e;
		padding-bottom: 20rpx;
		line-height: 1.5;
	}

	.img-list {
		padding-bottom: 30rpx;
	}

	.img-item {
		margin-bottom: 20rpx;
	}

	.img-item:last-child {
		margin-bottom: 0;
	}

	.img-item image {
		width: 100%;
		border-radius: 8rpx;
	}

	.buy-box {
		background-color: rgba(255, 255, 255, 0.95);
		height: 150rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 0 30rpx;
		border-top: 1px solid #ddd;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.price-sj {
		font-size: 42rpx;
		color: #ff1e00;
		font-weight: 700;
	}

	.price-num {
		font-size: 68rpx;
	}

	.market-price {
		font-size: 26rpx;
		color: #9c9c9c;
		font-weight: 400;
		text-decoration: line-through;
		margin-left: 10rpx;
	}

	.price-old {
		font-size: 26rpx;
		color: #ff1e00;
		margin-top: 5rpx;
	}

	.buy-lj {
		width: 190rpx;
		height: 72rpx;
		border: 1px solid #ff1e00;
		border-radius: 6rpx;
		font-size: 30rpx;
		line-height: 72rpx;
		color: #fff;
		text-align: center;
		background-color: #ff1e00;
	}

	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		color: #999;
	}
</style>